<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     <link rel="stylesheet" type="text/css" href="css.css" />
     <link rel="stylesheet" href="ico/iconfont.css" />
     <link rel="Shortcut Icon" href="ico.ico" />
    <title>游戏特色</title>
    <script src="jquery-1.12.4.js"></script>
    <script src='jquery.transit.js'></script>
  <script>
    $(document).ready(function () {
      
        $(".banner-door1").animate({
          left:0
        }, 1200, "swing", function () {
        })
     
     	$(".banner-door2").animate({
          right:0
        }, 1200, "swing", function () {
        }) 
      
        $(".banner-cha").animate({
          bottom:0,
          opacity:1
        }, 1500, "linear", function () {
        })

        $(".slogon").animate({
          opacity:1
        }, 1800, "swing", function () {
        })

		$(".banner-logo").animate({
          opacity:1
        }, 800, "swing", function () {
        })



		// 第一卷曲动画

        $(window).scroll(function(){
        	if ($(window).scrollTop() > 685) {
        		$(".diyi-title").animate({
          opacity:1
        }, 800, "swing", function () {
        })
        		$(".diyi-intr").animate({
          opacity:1
        }, 800, "swing", function () {
        })
        		$(".diyi-pic").animate({
          opacity:1
        }, 800, "swing", function () {
        })
        	}
        })

        // 第二卷曲动画
		$(window).scroll(function(){
        	if ($(window).scrollTop() > 1285) {
        		$(".dier-title").animate({
          height: 98
        }, 800, "swing", function () {
        })
        		$(".dier-intr").animate({
          left:243
        }, 800, "swing", function () {
        })
        		$(".dier-pic").animate({
          right:208
        }, 800, "swing", function () {
        })
        	}
        })
		//第三卷曲动画
		$(window).scroll(function(){
        	if ($(window).scrollTop() > 2485) {
        		$(".disan-title").animate({
          opacity:1
        }, 800, "swing", function () {
        })
        		$(".disan-intr").animate({
          opacity:1
        }, 800, "swing", function () {
        })
        		$(".disan-intr-cha1").animate({
          opacity:1
        }, 1000, "swing", function () {
        })
        		$(".disan-intr-cha2").animate({
          opacity:1
        }, 1500, "swing", function () {
        })
        		$(".disan-intr-cha3").animate({
          opacity:1
        }, 2000, "swing", function () {
        })
        		$(".disan-intr-cha4").animate({
          opacity:1
        }, 2500, "swing", function () {
        })
        	}
        })
		//第四卷曲
		$(window).scroll(function(){
        	if ($(window).scrollTop() > 2885) {
        		$(".disi-title").animate({
          opacity:1
        }, 800, "swing", function () {
        })
        		$(".disi-pic").animate({
          opacity:1
        }, 800, "swing", function () {
        })
        		
        	}
        })

        $(".disi-pic").mouseenter(function(){
        	$(this).siblings(".zuoce").show();
        	$(this).siblings(".youce").show();

        })


        $(".slogon").mouseenter(function(){
        	$(".download").animate({opacity:1},800,"linear", function () {
        })
        })

        $(".tips").mouseenter(function(){
        	$(this).children("em").stop().animate({opacity:1},200,"linear", function () {
        })
        })
        
        $(".tips").mouseleave(function(){
        	$(this).children("em").stop().animate({opacity:0},200,"linear", function () {
        })
        })
       	
         $(".tips").mouseenter(function(){
        	$(this).children("span").stop().animate({"left":"65px"},200,"swing", function () {
        })
        })
		 $(".tips").mouseleave(function(){
        	$(this).children("span").stop().animate({"left":"50px"},200,"linear", function () {
        })
        })


			var bu = 0;
            var time1= setInterval(function () {
                bu+=1;
                $(".download  .erweima .line").css("top",bu+"px");

                if(bu==100){
                   bu=0;
                }

            }, 17);
    });
    		var cu=1;
    		var time2=setInterval(function () {
                cu+=0.1;
                $("#heart").transition({scale:cu});
                if(cu>1.2){
                   cu=1;
                }

            }, 50);

    $(".banner").mousemove(function () {  
   var x = parseInt(e.pageX+12) + "px";  
   var y = e.pageY + "px";  
   $("clouds1").css("left",(-40+x/100)+"px")
    $("#mousePosition").html(xy);  
})  

  </script>

</head>
<body>
    <!-- 头部开始 -->
    <div id="top">
    <div id="top-main" class="top-main w clearfix">
        <a href="http://game.163.com/" class="logo"></a>

        <div class="right clearfix">
            <div class="one"><a href="">注册账号</a></div>
            <div class="one"><a href="">安卓充值</a></div>
            <div class="two"><a href="">网易游戏全目录</a></div>
            <div class="three"><a href="">领取宝箱</a></div>
        </div>
    </div>
</div>
    <!-- 头部结束 -->

    <!-- nav start -->
    <div class="nav">
        <div class="nav-in">
            <ul>
                <li>
                	<a class="tips" href="">
						<i class="sup"></i><span class="title one"></span></a>
                </li>
                <li><a class="tips" href="">
                	<em></em><span class="title two"></span>
                	</a>
                </li>
                <li><a class="tips" href="">
                	<em></em><span class="title three"></span>
                	</a>
                </li>
                <li><a class="tips" href="">
                	<em></em><span class="title four"></span>
                	</a>
                </li>
                <li><a class="tips" href="">
                	<em></em><span class="title five"></span>
                	</a>
                </li>
                <li><a  class="noborder tips" href="">
                	<em></em><span class="title six"></span>
                	</a>
                </li>                              
            </ul>
            <div class="contain">
            	<span class="text">关注《阴阳师》</span>
            	<a class="icon qq" href=""></a>
            	<a class="icon wx" href=""></a>
            	<a class="icon wb" href=""></a>
            	<a class="icon tb" href=""></a>
            </div>
        </div>
    </div>
    <!-- nav end -->
    <!-- banner部分开始 -->
    <div class="banner">
        <!-- 背景 -->
		<div class="banner-bgc">
			<!-- 对开门 -->
			<div class="banner-door1"></div>
			<div class="banner-door2"></div>
			<!-- 人物 -->
			<div class="banner-cha"></div>
			<!-- 装饰 -->
			<div class="banner-flower1"></div>
			<div class="banner-flower2"></div>
			<div class="banner-clouds1"></div>
			<div class="banner-clouds2"></div>
		</div>
		<!-- logo -->
		<div class="banner-logo">			
			<a href=""><h3></h3></a>
		</div>
		<!-- 广告 -->
		<div class="slogon">
			<span id="heart">
				<span id="theone"></span>
			</span>
		</div>
		<div class="download">
			<div class="erweima">
				<img src="img/erweima.png" alt="" />
				<img class="line"src="img/line.png" alt="" />
			</div>
			<div class="down-icon">
			<a class="apps" href=""></a>
			<a class="andd" href=""></a>
			</div>
		</div>
    </div>
    <!-- banner部分结束 -->

    <!-- 第一介绍开始啦 -->
    <div class="diyi">

    	<div class="diyi-title"></div>

    	<div class="diyi-intr">
    		<img src="img/1/xiaotu.jpg" alt="loading" />
    		<div class="diyi-intr-text">
    			<p>绮丽唯美的平安时代，妖魅丛生。原本在阴界的妖怪与鬼灵，成为了人间的常客，并制造各种离奇骚乱。世界上有一类被称为“阴阳师”的异能者，能够画符念咒、役使鬼神，并与其建立契约收作式神。他们调和着人类与鬼怪的矛盾，维系两界的平衡与安稳。这其中的佼佼者，名叫晴明的你更是天赋异禀， 年纪轻轻便与众多强力式神缔结了契约......</p>
    		</div>
    	</div>

    	<div class="diyi-pic"></div>

    </div>
    <!-- 第一介绍结束啦 -->

    <!-- 第二介绍开始啦 -->
    <div class="dier">

    	<div class="dier-title"></div>

    	<div class="dier-intr">
    		<p>游戏内实景截图</p>
    		<img src="img/2/xiaotu.jpg" alt="0" />
    	</div>

    	<div class="dier-pic"></div>
    </div>

    <!-- 第二介绍结束啦 -->

    <!-- 第三介绍开始啦 -->
    <div class="disan">

    	<div class="disan-title"></div>

    	<div class="disan-intr">
    		<div class="disan-intr-cha1">
    			<div class="bor"><img src="img/3/zj1.png" alt="1" /></div>
    			<h3>CV:杉山纪彰</h3>
    			<p>声音慵懒悠闲、同时穿透力强，辨识度高</p>
    		</div>
    		<div class="disan-intr-cha2">
    			<div class="bor"><img src="img/3/zj2.png" alt="2" /></div>
    			<h3>CV:钉宫理惠</h3>
    			<p>音质特别，带有柔润质感，常配好强少女音</p>
    		</div>
    		<div class="disan-intr-cha3">
    			<div class="bor"><img src="img/3/zj3.png" alt="3" /></div>
    			<h3>CV:铃木达央</h3>
    			<p>声线多变，演技娴熟，粉丝昵称其为“达子”</p>
    		</div>
    		<div class="disan-intr-cha4">
    			<div class="bor"><img src="img/3/zj4.png" alt="4" /></div>
    			<h3>CV:泽城美雪</h3>
    			<p>声音成熟冷酷，能轻松驾驭高冷型御姐</p>
    		</div>
    	</div>
    </div>

    <!-- 第三介绍结束啦 -->

	<!-- 第四介绍开始啦 -->
    <div class="disi">

    	<div class="disi-title"></div>
        <div class="zuoce"></div>
    	<div class="disi-pic">
    		<img src="img/4/dm.jpg" alt="0" />
    		<p>看剧情发弹幕，营造二次元观影体验</p>
    	</div>
    	<div class="youce"></div>
    </div>

    <!-- 第四介绍结束啦 -->
    <!-- 大导航开始 -->
 	
   <!--foot开始-->
<div class="foot">
    <div id="share">
        <div class="share6">
            <span class="share-txt">分享到：</span>
            <ul class="share-btn">
                <li>
                    <a href="javascript:;" title="分享到微信二维码" class="share-one">
                    <span class="iconfont icon-weixin"></span>
                    <em>微信</em>
                    </a>
                </li>
                <li>
                    <a href="javascript:;" title="分享到易信" class="share-two">
                    <span class="iconfont icon-yixin"></span>
                    <em>易信</em>
                    </a>

                </li>
                <li>
                    <a href="javascript:;" title="分享到新浪微博" class="share-three">
                    <span class="iconfont icon-xinlang-copy"></span>
                    <em>新浪微博</em>
                    </a>

                </li>
                <li>
                    <a href="javascript:;" title="分享到QQ空间" class="share-four">
                    <span class="iconfont icon-qqkongjian"></span>
                    <em>QQ空间</em>
                    </a>

                </li>
                  
            </ul>
        </div>
        <div class="share6-clearfix"></div>
    </div>
    <div id="copyRight"><p id="copyRight-corp" style="width:832px;text-align:left;margin:0 auto;padding:15px 0 0 0;font-size:12px;font-family:'宋体';line-height:24px;display:block;position:relative;"><span style="position:relative;vertical-align:top;top:4px;display:inline-block;position:relative;"><a href="http://www.163.com" target="_blank" style="width:118px;height:31px;padding-right:0;display:inline-block;cursor:pointer;background:url(img/netease.1.png) no-repeat"></a><a href="http://game.163.com" target="_blank" style="width:134px;height:31px;padding-right:15px;display:inline-block;cursor:pointer;background:url(img/nie.1.png) no-repeat"></a></span><span style="text-align:left;display:inline-block;padding-left:6px;"><span id="ncp-l1"><a href="http://gb.corp.163.com/gb/about/overview.html" target="_blank">公司简介</a> - <a href="http://help.163.com/" target="_blank">客户服务</a> - <a href="http://gb.corp.163.com/gb/legal.html" target="_blank">相关法律</a> - <a href="http://game.163.com/about/about.html" target="_blank">网易游戏</a> - <a href="http://game.163.com/about/contactus.html" target="_blank">联系我们</a> - <a href="http://game.163.com/bs/business.html" target="_blank">商务合作</a> - <a href="http://game.163.com/job/" target="_blank">加入我们</a> - <a href="http://game.163.com/sy/client/userAgreement2.html" target="_blank">用户协议</a></span><br><span id="ncp-l2">网易公司版权所有 ?1997-2017　　  </span></span><a href="http://www.leihuo.net/jiazhang.html" style="display:inline-block;padding:2px;color:white;background-color:rgb(97,0,0);position:absolute;right:70px;top:38px;" target="_blank">点击查看家长监护工程&nbsp;&gt;</a><br>本游戏适合16岁以上的玩家进入。<br>积极健康的游戏心态是健康游戏的开端，本游戏故事情节设置紧凑，请您合理控制游戏时间，避免沉溺游戏影响生活，注意自我保护，防范网络陷阱。文网游备字【2016】M-RPG4708号《网络文化经营许可证》浙网文[2016]0155-055号 </span></p></div>

</div>
<!--foot结束-->
    <!-- footer部分结束 -->
</body>
</html>